<!DOCTYPE html>
<html>
<head>
	<title>Image Browse</title>

	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
	<style type="text/css">
	.image-preview {
		width: 98%; 
		height: 300px; 
		border: 2px solid green; 
	}
	.mar-t { margin-top: 5px; }
	.el-tag {
		font-size: 16px!important;
		line-height: 32px!important;
	}
	.describe {
		font-size: 18px;
		/*white-space: normal;
		word-wrap: break-word;
		word-break: normal;*/
	}
	</style>
</head>
<body>
	
	<div id="app-container">
		<div v-if="metadatas.length > 0">
			<el-row 
				v-for="(rv, rind) in grids.rows" 
				:key="rv" 
				:gutter="5"
				style="margin-bottom: 5px;">
				<el-col v-for="(cv, cind) in grids.cols" :key="rv + cv + ''" :span="grids.span">
					<el-card 
						v-if="rind * grids.cols + cind < metadatas.length" 
						:body-style="{ padding: '5px' }">
						<!-- <el-image 
							:src="getItem(rind, cind).filepath"
							fit="cover"
							lazy
							:preview-src-list="[getItem(rind, cind).filepath]"
							class="image-preview"></el-image>
						<div>
							<el-tag type="success">{{ getItem(rind, cind).predict }}</el-tag>
							<el-tag type="success">{{ getItem(rind, cind).category }}</el-tag>
						</div>
						<div class="mar-t">
							{{ getItem(rind, cind).describe }}
						</div> -->
						<el-row :gutter="5">
							<el-col :span="14">
								<el-image 
									:src="getItem(rind, cind).filepath"
									fit="cover"
									lazy
									:preview-src-list="[getItem(rind, cind).filepath]"
									class="image-preview"></el-image>
							</el-col>
							<el-col :span="10">
								<div>
									<el-tag type="success">{{ getItem(rind, cind).predict }}</el-tag>
									<el-tag type="success">{{ getItem(rind, cind).category }}</el-tag>
								</div>
								<div class="mar-t describe">
									{{ getItem(rind, cind).describe }}
								</div>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div v-else style="text-align: center;">
			<h1>暂无图片</h1>
		</div>
	</div>

</body>

	<script src="static/components/vue/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
	<script src="static/components/axios.min.js"></script>
	<script src="static/components/browse.js"></script>
</html>
